<template>
  <!-- 我是订单详情页面 -->
  <div class="onorder">
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar
          title="订单评论"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>
    <!-- 添加评论区域 -->
    <div class="con" >
      <van-field
        rows="2"
        v-model='content'
        autosize
        label="评论"
        type="textarea"
        maxlength="50"
        placeholder="请输入评论"
        show-word-limit
      >

       <template #button>
           <van-button @click="Adddata" color="#7232dd" size="small">评论</van-button>
       </template>
      </van-field>
    </div>
    <!-- 评论展示区域 -->
    <div class="table">
      <van-card class="orderlist" v-for="item in reviewdataline" :key="item.id">
        <template #tags>
          <van-tag class="name1">
            <span>顾客ID：{{ item.customerId }}</span>
          </van-tag>
          <br />
          <van-tag class="name">
            <span>{{ item.content }}</span>
          </van-tag>
          <br />
          <van-tag class="sta">订单ID：{{ item.orderId }}</van-tag>
          <br />
          <van-tag class="time">
            {{ item.commentTime | fmtDate_global }}
          </van-tag>
        </template>

        <template #footer>
          <van-button @click="disdata(item.id)" size="mini"
            >删除评论</van-button
          >
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
// 引入vuex辅助函数
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
import { get, post } from "@/http/axios";
export default {
  data() {
    return {
      // 订单点击跳转到订单详情页面时 传递的订单id和顾客id
      orderId: this.$route.query.orderId,
      customerId: this.$route.query.customerId,
      reviewdataline: [],
      content:""
    };
  },
  computed: {},
  methods: {
      // 添加订单
    async Adddata() {
        // alert(1)
        let data = {
        orderId:this.orderId,
        customerId:this.customerId,
        content:this.content,
      };
      console.log(data);
      let res = await post("/orderComment/submit",data);
      console.log(res);
      this.reviewData();
    },
    // 跳转到订单详情页面 并且传递参数
    checkdata(orderId) {
        alert(1)
      // 使用编程式导航进行路由的跳转
      this.$router.push({
        // 路径
        path: "/manager/overorder",
        // 参数的传递
        query: {
          orderId,
        },
      });
    },
    // 删除订单
    async disdata(id) {
      let res = await get("/orderComment/deleteById", { id });
      console.log(res);
      this.reviewData();
      // this.onClickLeft()
    },
    // 获取订单评论数据
    async reviewData() {
      let data = {
        page: 1,
        pageSize: 100,
        // orderId: this.orderId,
      };
      let res = await get("/orderComment/pageQuery", data);
      this.reviewdataline = res.data.data.list;
    },
    // 返回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {
    // 自动获取订单评论数据
    this.reviewData();
  },
};
</script>

<style scoped>
.text {
  color: red;
  text-align: right;
  font-size: 12px;
}
.text1 {
  margin-bottom: 0;
  text-align: right;
}
.botton {
  overflow: hidden;
  background-color: #f8f8f8;
  padding: 1em 0.5em;
  font-size: 13px;
  color: #999;
}
.orderlist {
  /* box-shadow: 1px 1px 1px 1px rgba(143, 66, 255, 0.4); */
  background-color: #fff;
  width: 95%;
  border-radius: 5px;
  margin: 5px auto;
  padding: 5px;
}
.buton {
  text-align: right;
}
.title span {
  color: aliceblue;
  font-size: 17px;
  text-align: center;
  line-height: 60px;
  vertical-align: middle;
}
.title {
  width: 100%;
  height: 60px;
  margin: auto;
  text-align: center;
  background: rgba(0, 0, 0, 0)
    linear-gradient(to right, rgb(224, 105, 139), #b490ca) repeat scroll 0% 0%;
}
.van-card__desc {
  margin-top: 10px;
  font-size: 12px;
}
.van-card {
  /* box-shadow: 0 0 10px #b490ca; */
  font-size: 16px;
  border-radius: 15px;
  background-color: #f2c59412;
}
.name span {
  font-size: 18px;
  font-family: times new roman;
  margin-top: 6px;
  /* margin: 0px 20px; */
}
.name1 span {
  font-size: 15px;
  font-family: times new roman;
  margin-top: 13px;
  /* margin: 0px 20px; */
}
.van-tag {
  text-align: center;
  border: none;
  background: none;
  color: rgb(104, 89, 89);
  font-size: 15px;
  margin: 5px 10px;
}
.time {
  font-size: 15px;
}
.sta,
.total {
  color: rgb(187, 91, 91);
  float: right;
  margin: 10px 10px;
}
.name_income {
  font-size: 17px;
  margin: 15px 15px;
}
.time_income {
  font-size: 17px;
  font-family: times new roman;
  margin: 10px 15px;
}
.total_income {
  font-family: times new roman;
  font-size: 18px;
  float: right;
}
</style>